<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item >用户管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/index/user/add' }">用户新增</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row class="margintop20">
            <el-col :span="12">
                 <el-form 
                    :model="form" 
                    :rules="rules"
                    ref="myform" 
                    label-width="100px" 
                    class="myform">
                    <el-form-item label="手机号码" prop="mobile">
                        <el-input v-model="form.mobile"></el-input>
                    </el-form-item>
                    <el-form-item label="呢称" prop="username">
                        <el-input v-model="form.username" ></el-input>
                    </el-form-item>
                    <el-form-item label="角色" prop="roleid">
                        <el-select v-model="form.roleid">
                            <el-option v-for="(role,i) in roleList" 
                                :key="i"
                                :label="role.label"
                                :value="role.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="登录密码" prop="password">
                        <el-input  type="password" v-model="form.password"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="info" class="width100"  @click="addForm" >添加</el-button>
                        <el-button type="danger" class="width100" @click="resetForm"  >重置</el-button>

                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
       
    </div>
</template>

<script>
import {roleList} from "@/utils"
import {adduserAjax} from "@/api"
export default {
    data(){
        return {
            form:{
                username:"来着xx的你",
                password:"abc123"
            },
            roleList,
            rules:{   // 表单校验 
                mobile:[
                    {required:true,message:"请输入手机号码",trigger:'blur'},
                    {
                        validator:(rule, value, callback)=>{
                            var mobileReg = /^1(3|5|6|7|8|9)\d{9}$/
                            if(mobileReg.test(value)){
                                callback()
                            }else{
                                callback(new Error("请输入正确的手机号码"));
                            }
                        },
                        trigger:'change'
                    }
                ],
                password:[
                    {required:true,message:"请输入登录密码",trigger:'blur'},
                    {
                        validator:(rule, value, callback)=>{
                            var passReg = /^[A-Za-z0-9]{4,12}$/
                            if(value.length<4){
                                callback(new Error("密码长度至少4位"));
                            }else if(value.length>12){
                                callback(new Error("密码长度最多12位"));
                            }else if(!passReg.test(value)){
                                callback(new Error("请输入正确的密码"));
                                
                            }else{
                                 callback()
                            }
                        },
                        trigger:'change'
                    }
                ],
                roleid:[
                    {required:true,message:"请选择用户角色类型",trigger:"change"}
                ],
                username:[
                    {required:true,message:"请输入用户名称",trigger:"blur"}
                ],
            }
        }
    },
    methods:{
        resetForm(){
            this.$refs.myform.resetFields();
        },
        addForm(){
            this.$refs.myform.validate(valid=>{
                if(valid){
                    adduserAjax(this.form)
                    .then(res=>{
                        if(res.type){
                            this.$router.push({name:"userlist"})
                        }
                    })
                }else{
                    return false;
                }
            })
        }
    }
}
</script>